<%--
  Created by IntelliJ IDEA.
  User: 苏沺
  Date: 2021/5/19
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script>
        $(function () {
            $("#username").blur(function () {   //id
                //获取用户名字
                var name = $(this).val();
                //判断用户名不为空和空串
                if(name!=null && name !=" "){
                    $.ajax({
                        url:"/checkName",
                        type:"GET",
                        data:{username:name},
                        dataType:"json",
                        success:function (data) {
                            //设置span的内容体
                            if(data.flag){
                                $(#spanMsg).html("<font color='red'>"+data.msg+"</font>");
                            }else if(!data.flag){
                                $(#spanMsg).html("<font color='green'>"+data.msg+"</font>");
                            }
                        },
                        error:function () {
                            alert("请求处理失败！")
                        }
                    })
                }

            })

        })
    </script>
</head>
<body>
    <form action="#" method="post">

        用户名：<input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="spanMsg" style="color:red"></span><br>
        密码：<input type="text" id="password" name="password" placeholder="请输入密码">
    </form>
</body>
</html>
